<template>
	<view>
		<u-navbar :title="title" :bgColor="bgcolor" :autoBack="true" :placeholder="true">
		</u-navbar>
		<view class="note">

		</view>
		<view class="" style="position: relative;width: 93%;margin: 15px auto 0;">
			<view class="flex" style="padding: 30px 15px; background-color: #fff; justify-content: space-between;box-shadow: 0px 2 5px 0px rgba(0,0,0,0.05);
			border-radius: 10px;">
				<view style="font-size: 16px; color: #1d1f20; font-weight: bold">
					{{ tit }}：{{ type == 2 ? name : username }}
				</view>
				<view v-if="is_handcheck == '1'" @click="jdan" style="
				padding: 5px 20px;
				background-color: #2447FF;
				border-radius: 15px;
				font-size: 14px;
				font-size: 14px;
				font-weight: 400;
				color: #fff;
			">
					交单记录
				</view>
			</view>
			<view class="flex" style="padding: 11px 0; justify-content: space-between">
				<view style="font-size: 15px; font-weight: 400; color: #333">结算日期</view>
				<view>
					<uni-datetime-picker return-type="timestamp" @change="change" v-model="range" type="daterange">
						<view @click="shoowo" class="flex"
							style="padding: 5px 15px; background-color: #fff; border-radius: 15px">
							<view style="font-size: 14px; color: #777979">到账日期：{{ dq_time }}</view>
							<image style="width: 12px; margin-left: 10px" src="/static/img/19.png" mode="widthFix">
							</image>
						</view>
					</uni-datetime-picker>
				</view>
			</view>
			<view style="">
				<view v-for="(it, i) in tab_list" :key="i"
					style="background-color: #fff; padding: 15px; margin-bottom: 15px; border-radius: 10px">
					<view class="flex" style="justify-content: space-between">
						<view class="flex">
							<image style="width: 42px; height: 42px; margin-right: 10px; border-radius: 10px"
								:src="imgurl + logo_img" mode=""></image>
							<view>
								<view style="font-size: 14px; font-weight: bold; color: #1d1f20">{{ name }}</view>
								
							</view>
						</view>
						<view class="flex">
							<text>业务员：{{ it.title.name }}</text>
						</view>
					</view>
					<view style="margin-top: 15px; padding: 15px 11px; background-color: #f7f9fa; border-radius: 5px">
						<view class="flex w_lists" style="justify-content: space-between" v-for="(its, is) in tit_arr"
							:key="is">
							<view
								style="width: 25%; text-align: center; color: #1d1f20; font-size: 14px">
								{{ its.name }}
							</view>
							<!-- <view :class="`opts`+is"
						style="text-align: center;font-size: 14px;color: #FF3331;display: flex;justify-content: space-between;"> -->
							<text style="width: 25%; text-align: center; font-size: 14px">{{ its.arr[0].name }}</text>
							<text style="width: 25%; text-align: center; font-size: 14px">{{ its.arr[1].name }}</text>
							<text v-if="is_ad == 1"
								style="width: 25%; text-align: center; font-size: 14px">{{ its.arr[2].name }}</text>
							<!-- </view> -->
						</view>
						<view class="flex w_lists" style="justify-content: space-between"
							v-for="(itema, indexa) in it.list" :key="itema.id">
							<view 
								style="width: 25%; text-align: center; color: #333333; font-size: 14px">
								{{ itema.projectlist.name }}
							</view>
							<view :class="`opt0`"
								style="width: 25%; text-align: center; color: #1d1f20; font-size: 14px">
								{{ itema.settlement_num }}
							</view>
							<view :class="`opt0`"
								style="width: 25%; text-align: center; color: #1d1f20; font-size: 14px">
								￥{{ itema.settlement_total }}
							</view>
							<view v-if="is_ad == 1" :class="`opt0`"
								style="width: 25%; text-align: center; color: #1d1f20; font-size: 14px">
								￥{{ itema.subsidy_total }}
							</view>
						</view>
						<view class="flex w_lists" style="justify-content: space-between">
							<view :class="`opt4`"
								style="width: 25%; text-align: center; color: #1d1f20; font-size: 14px">
								合计金额
							</view>
							<view :class="`opt4`"
								style="width: 25%; text-align: center; color: #1d1f20; font-size: 14px">
								{{ it.total.count }}
							</view>
							<view :class="`opt4`"
								style="width: 25%; text-align: center; color: #1d1f20; font-size: 14px">
								￥{{ it.total.totalprice }}
							</view>
							<view v-if="is_ad == 1" :class="`opt4`"
								style="width: 25%; text-align: center; color: #1d1f20; font-size: 14px">
								￥{{ it.total.subsidy_total }}
							</view>
						</view>
					</view>
					<view
						style="margin-top: 14px; font-size: 12px; color: #1d1f20; font-weight: 400; color: #808282">
						作业时间：<text style="font-size: 12px;font-weight: 400;color: #FF8040;line-height: 10px;">{{ it.title.work_time }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '../../common/config/index.js';
	export default {
		data() {
			return {
				imgurl: config.imgurl,
				tit: '业务员',
				range: [],
				tit_arr: [{
					name: '结算标准',
					arr: [{
							name: '结算数量',
							id: 0,
						},
						{
							name: '结算收益',
							id: 0,
						},
						{
							name: '补贴收益',
							id: '',
						},
					],
				}, ],
				project_id: '',
				time: '',
				timestart: '',
				timeend: '',
				name: '',
				tab_list: [],
				is_ad: '',
				type: '',
				applyphone: '',
				username: '',
				logo_img: '',
				dq_time: '',
				is_handcheck: '',
				bgcolor: 'rgba(255,255,255,0)',
				title:'业务员结算明细'
			};
		},
		onShow() {
			this.dq_time = uni.$u.timeFormat('', 'yyyy-mm-dd');
			uni.$on('update', this.times);
			this.mosett();
		},
		onLoad(e) {
			this.project_id = e.project_id;
			this.applyphone = e.applyphone;
			this.type = e.type;
			if (e.type == 2) {
				this.title = '项目结算明细'
				// uni.setNavigationBarTitle({
				// 	title: '项目结算明细',
				// });
				this.tit = '项目';
			} else {
				this.username = e.name;
			}
		},
		methods: {
			shoowo() {
				uni.$emit('qieh', {
					msg: 0,
				});
			},
			jdan() {
				if (this.username != '') {
					uni.navigateTo({
						url: '/pages/project/presentation?id=' + this.project_id + '&name=' + this.username,
					});
				} else {
					uni.navigateTo({
						url: '/pages/project/presentation?id=' + this.project_id,
					});
				}
			},
			times(e) {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				date.setMonth(month);
				date.setDate('1');
				// 获取本月最后一天
				let dd = date.setDate(date.getDate() - 1);
				let els = uni.$u.timeFormat(dd, 'yyyy-mm-dd');

				this.timestart = '';
				this.timeend = '';
				this.range = [];
				this.dq_time = uni.$u.timeFormat('', 'yyyy-mm-dd');
				let that = this;
				if (e.msg.name == '今日') {
					that.time = 'today';
					this.dq_time = uni.$u.timeFormat('', 'yyyy-mm-dd');
				} else if (e.msg.name == '昨日') {
					that.time = 'yesterday';
					this.dq_time = year + '-' + month + '-' + day + '至' + year + '-' + month + '-' + (day - 1);
				} else {
					that.time = 'month';
					this.dq_time = year + '-' + month + '-' + '01' + '至' + els;
				}
				that.mosett();
			},
			async mosett() {
				let res = await this.$http.index.showSettlement({
					project_id: this.project_id,
					time: this.time,
					timestart: this.timestart,
					timeend: this.timeend,
					applyphone: this.applyphone,
				});
				if (res.code == 1) {
					this.is_ad = res.data.is_A;
					this.tab_list = res.data.nData;
					// if (this.type == 2) {
					this.name = res.data.project.title;
					this.logo_img = res.data.project.logo_image;
					// }
					this.pro_ject = res.data.project;
					this.is_handcheck = res.data.project.is_handcheck;
				}
			},
			change(e) {
				this.time = '';
				this.timestart = e[0] / 1000;
				this.timeend = e[1] / 1000;
				this.dq_time =
					uni.$u.timeFormat(this.timestart, 'yyyy-mm-dd') + '-' + uni.$u.timeFormat(this.timeend, 'yyyy-mm-dd');
				this.mosett();
			},
		},
	};
</script>
<style>
	page {
		background-color: #f7f9fa;
	}
</style>
<style scoped lang="scss">
	.w_lists {
		margin-bottom: 10px;

		&:last-child {
			margin-bottom: 0px;
		}
	}

	.opt0 {
		color: #7a7d7d !important;
	}

	.opt4 {
		color: #FF8040 !important;
	}

	.opts0 {
		color: #7a7d7d !important;
	}

	.note {
		background-image: url('@/static/font/21.png');
		position: fixed;
		width: 100%;
		height: 100%;
		background-size: 100% 100%;
		top: 0;
	}
</style>